<template>
	<view class="edit-goods-detail">
		<u-form>
			<div class="item-bg">
				<u-form-item label=" " label-position="top">
					<u-input v-model="content" type="textarea" placeholder="请输入商品介绍" />
				</u-form-item>
			</div>
			<div class="image-wrapper" v-for="(item,index) in images" :key="index">
				<image @click="preview(item,images)" class="image" mode="widthFix" :src="item">
				</image>
				<u-icon name="trash-fill" color="#f51818" class="del" size="30" @click="images.splice(index,1)">
				</u-icon>
			</div>
			<button type="default" @click="chooseImage('images')" class="choose-image">
				<span class="text">+</span>
				<span class="text">添加图片</span>
			</button>
		</u-form>
	</view>
</template>

<script>
	import api from "@/config/api.js";
	import storage from "@/utils/storage.js";
	export default {
		name: 'edit-goods-detail',
		data() {
			return {
				content: '',
				images: [],
			}
		},
		onLoad() {
			let goodsDetail = uni.getStorageSync('GoodsDetail')
			if (goodsDetail) {
				this.content = goodsDetail.content || ''
				this.images = goodsDetail.images || []
			}
		},
		onUnload() {
			uni.setStorageSync('GoodsDetail', {
				content: this.content,
				images: this.images
			})
		},
		methods: {
			// 上传照片
			chooseImage() {
				let Token = storage.getAccessToken()
				let that = this
				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						var tempFilePaths = res.tempFilePaths
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: api.common + '/upload/file',
								fileType: "image",
								filePath: tempFilePaths[i],
								name: 'file',
								ruleForm: {},
								'content-type': 'multipart/form-data',
								header: {
									accessToken: Token,
									'content-type': 'multipart/form-data'
								}, // 设置请求的 header
								success: function(res) {
									res = JSON.parse(res.data)
									that.images.push(res.result)
								}
							})
						}

					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.edit-goods-detail {
		padding-bottom: 60upx;

		.item-bg {
			padding: 0 40upx;
			background-color: #ffffff;
		}

		.image-wrapper {
			position: relative;

			.image {
				width: 100%;
				vertical-align: middle;
			}

			.del {
				position: absolute;
				top: 24upx;
				right: 24upx;
			}
		}

		.choose-image {
			margin-top: 24upx;
			width: 680upx;
			height: 88upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28upx;
			color: #FF6B6B;
			border: 2upx solid rgba(255, 107, 107, 1);
			background-color: transparent;

			.text {
				margin: 0 12upx;
			}
		}
	}
</style>
